<template>
	<view>
		<!-- 背景图 -->
		<image src="https://dark2000-1300165652.cos.ap-shanghai.myqcloud.com/darklight/bg.jpg/large" mode="aspectFill" style="width: 750rpx; height: 320rpx;"></image>
		<!-- 个人信息 -->
		<view class="border-bottom" style="height: 350rpx;">
			<!-- 头像及关注按钮 -->
			<view class="flex align-center justify-between px-3">
				<image :src="space_owner.avatar || '/static/demo/userpic/12.jpg'" mode="widthFix" 
				class="rounded-circle"
				style="height: 130rpx; width: 130rpx; margin-top: -60rpx;"></image>
				<view v-if="space_owner.id!=cuser.id" class="font-sm text-white bg-main flex align-center justify-center rounded"
				hover-class="bg-main-hover" style="width: 120rpx; height: 60rpx;"
				@tap="doFollow()">{{followed?'取消关注':'关注'}}</view>
			</view>
			<view class="flex align-center px-3 py-1">
				<text class="font-lg text-main font-weight-bold">{{space_owner.nickname || '暂无昵称'}}</text>
				<text class="font text-light-muted ml-2">UID:{{space_owner.username}}</text>
			</view>
			
			<view class="flex align-center px-3 py-1">
				<text class="font-sm text-white border bg-main rounded text-center" style="line-height: 50rpx; width: 140rpx;">年度大会员</text>
			</view>
			<view class="flex align-center px-3 text-muted py-1">
				<text class="font mr-1 font-weight-bold">{{followCount}}</text>
				<text class="font-sm mr-2">关注</text>
				<text class="font mr-1 font-weight-bold">{{fansCount}}</text>
				<text class="font-sm">粉丝</text>
			</view>
			<view class="px-3">
				<view class="text-ellipsis font-sm text-light-muted" style="line-height: 1.5;">
					{{space_owner.description || '暂无描述'}}
				</view>
			</view>
		</view>
		<view class="flex align-center px-3 font text-muted" style="height: 44px;">
			<view v-for="(item,index) in tabs" :key="index" class="flex-1 text-center" :class="currentTab===index?'tab-active':''"
			 @click="changeTab(index)">{{item.title}}</view>
		</view>
		
		<swiper :duration="300" :style="'height: '+scrollHeight+'px'" class="px-2" circular="true" :current="currentTab"
		@change="changeTab($event.target.current)">
			<swiper-item v-for="(alist,i) in lists" :key="i">
				<scroll-view scroll-y="true" class="swiper-item" :style="'height: '+scrollHeight+'px'">
					<navigator :url="'../video-detail/video-detail?id='+item.id" v-for="(item,index) in alist" :key="index" >
						<view class="flex border-bottom py-2 align-center">
							<image :src="item.cover+'/small'" mode="aspectFill" class="rounded-lg mx-2 flex-shrink"
								style="width: 250rpx; height: 160rpx;"></image>
							<view class="flex-1">
								<view class="text-ellipsis-2 font mb-1 pr-1">{{item.title}}</view>
								<view class="font-sm text-light-muted mb-1">{{$Time.gettime(item.created_time)}}</view>
								<view class="flex text-light-muted mb-1 justify-between align-center">
									<view class="flex align-center">
										<text class="iconfont iconbofangshu font-md mr-1"></text>
										<text class="font-sm">{{$Time.getCounts(item.play_count)}}</text>
										<text class="iconfont icondanmushu font-md mx-1"></text>
										<text class="font-sm">{{$Time.getCounts(item.danmu_count)}}</text>
									</view>
									<text class="iconfont icongengduo"></text>
								</view>
							</view>
						</view>
					</navigator>
					<!-- 上拉加载更多 -->
					<view class="flex align-center justify-center font text-secondary" 
					style="height: 50px;" hover-class="bg-light" @click="getMore(i)">{{getText(i)}}</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- <scroll-view scroll-y="true" :style="'height: '+scrollHeight+'px'">
			<view class="f-divider"></view>
			<view class="px-2" v-for="(alist,i) in lists">
				<template v-if="i===currentTab">
					
				</template>
			</view>
		</scroll-view> -->
	</view>	
</template>

<script>
	// 引入vuex的 mapState
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				space_owner:{},//此空间所属用户，从接口获得
				fansCount:0,//当前空间所属用户的粉丝数
				videoCount:0,//当前空间所属用户的视频数
				followCount:0,//当前空间所属用户其关注的用户数
				followed:false,//当前登录用户是否关注此当前空间所属用户
				scrollHeight:0,
				currentTab:0,
				currentNomore:false,
				lists:{
					video_list:[],
					fava_list:[],
				},
				tabs:[{
					title:'作品',
					key:'video_list',
					page:1,
					nomore:false
				},{
					title:'收藏',
					key:'fava_list',
					page:1,
					nomore:false
				}]
			}
		},
		computed:{
			...mapState({
				// 当前登录用户，注意要与此页面的user(此作品所属用户)进行区分
				cuser: state => state.user
			})
		},
		onLoad(e) {
			if(e.user_id){
				this.getUserInfo(e.user_id);
				this.getList(e.user_id);
				// 只有当前用户登录后，才判断当前用户是否关注了此空间用户
				if(this.cuser){
					this.isFollowed(e.user_id);
				}
			}
		},
		computed:{
			...mapState({
				// 当前登录用户，注意要与此页面的user(此作品所属用户)进行区分
				cuser: state => state.user
			})
		},
		created() {
			let sysInfo = uni.getSystemInfoSync()
			this.scrollHeight = sysInfo.windowHeight - 44 -44 - sysInfo.statusBarHeight
		},
		methods: {
			// 关注或取消关注
			doFollow(){
				// 用户如果已经登录
				if(this.cuser){
					let url = this.followed ? '/user/unfollow':'/user/follow';
					this.$H.post(url,{follow_user_id:this.space_owner.id},{token:true}).then(res=>{
						this.followed = !this.followed;
						uni.showToast({title:res,icon:'none'});
					}).catch(err=>{
						uni.showToast({title:err,icon:'none'});
					})
				}
				else {
					uni.showToast({title:'请先登录',icon:'none'});
					setTimeout(()=>{
						uni.navigateTo({
							url:'../login/login'
						})
					},500);
				}
			},
			getText(i){
				let index = (i==='video_list') ? 0 : 1;
				return this.tabs[index].nomore ? '我是有底线的':'点击加载更多';
			},
			getMore(i){
				let { tabs,lists } = this;
				//【特别注意】：这里的为lists的对象的属性值，video_list,fava_list
				let index = (i==='video_list') ? 0 : 1;
				if(!tabs[index].nomore){
					tabs[index].page++;
					let item = tabs[index];
					this.$H.get('/'+item.key+'/'+item.page+'?user_id='+this.space_owner.id).then(res=>{
						// 需要将所有cover，加上服务器地址
						res.forEach(it=>{
							it.cover = this.$H.common.sourceUrl + it.cover; 
						})
						if(res.length > 0){
							lists[item.key] = [...lists[item.key],...res];
							uni.showToast({
								title:'数据获取成功',
								icon:'none'
							});
						} else {
							uni.showToast({
								title:'没有更多数据了',
								icon:'none'
							});
							item.page --;
						}
						
						if(res.length < 10){
							item.nomore = true;
						}
					}).catch(err=>{
						item.page --;
						console.log(err);
					})
				}
			},
			getUserInfo(space_owner_user_id){
				return this.$H.get('/user/user_info?user_id='+space_owner_user_id).then(res=>{
					this.space_owner = res.user;
					this.fansCount = res.fansCount;
					this.videoCount = res.videoCount;
					this.followCount = res.followCount;
				})
			},
			isFollowed(space_owner_user_id){
				return this.$H.get('/user/followed?user_id='+space_owner_user_id,{token:true}).then(res=>{
					this.followed = res.followed;
				})
			},
			getList(space_owner_user_id){
				let { tabs } = this;
				tabs.forEach(item=>{
					if(!item.nomore){
						this.$H.get('/'+item.key+'/'+item.page+'?user_id='+space_owner_user_id).then(res=>{
							// 需要将所有cover，加上服务器地址
							res.forEach(it=>{
								it.cover = this.$H.common.sourceUrl + it.cover; 
							})
							this.lists[item.key] = res;
							//console.log(item.key,this.lists[item.key]);
							if(res.length < 10){
								item.nomore = true;
							}
							console.log('getList is ok')
						}).catch(err=>{
							console.log('getlist-err:',err)
						})
					}
				})
			},
			changeTab(index){
				this.currentTab = index;
				// uni.pageScrollTo({
				// 	scrollTop:300,
				// 	duration:300
				// })
			},
			changeSwiper(e){
				//console.log(e.target.current)
				this.currentTab = e.target.current;
			}
		}
	}
</script>

<style scoped lang="scss">
scroll-view ::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
</style>
